<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Macify Tab</title>
  <script src="js/fonts.js"></script>
  <script src="js/lang.js"></script>
  <link href="css/popup.css" rel="stylesheet" />
  <!-- <link href="css/bootstrap.min.css" rel="stylesheet" />
  <script src="js/bootstrap.bundle.js"></script> -->

</head>

<body>
  <div class="background"></div>
  <div id="errorBox"></div>
  <div id="videoBox"></div>

  <div id="author" class="author top-layer">
    <p>Created by Jason Ng, Dofy, Setilis, Blackvon.</p>
    <a href="https://github.com/jason5ng32/macOS-Screen-Saver-as-Chrome-New-Tab" target="_blank"
      title="%_pop_github"><img src="res/github.png" /></a>
  </div>
  <div class="refresh top-layer">
    <button id="switchVideoBtn" title="%_pop_refresh_video"></button>
  </div>
  <div class="zenmode top-layer" id="zenmode">
    <button id="fullscreen-btn" title="%_pop_zen_mode"></button>
    <audio id="background-audio" loop>
    </audio>
  </div>
  <div class="toggle top-layer">
    <div class="wth" id="wth">
      <button id="wthBtn" title="%_pop_weather"></button>
    </div>
    <div class="tss" id="tss">
      <button id="tssBtn" title="%_pop_top_sites"></button>
    </div>
  </div>
  <div class="topsites-area top-layer" id="topsites-area">

    <div class="topsites-info top-layer" id="topsites">
      <span>%_pop_load_top_sites</span>
    </div>


  </div>
  <div id="weather-area" class="top-layer">
    <div id="weather-info">

      <div class="current-aera">
        <div class="weather-text">
          <p>%_pop_now</p>
        </div>
        <img id="weather-icon" src="res/weather.webp" alt="Weather Icon">
        <p id="current-weather">-</p>
      </div>

      <div id="forcast-vertical">
        <div class="weather-text">
          <p>%_pop_today</p>
        </div>
        <img id="weather-icon1" src="res/weather.webp" alt="Weather Icon">
        <p id="forecast1">-</p>
      </div>

      <div id="forcast-vertical">
        <div class="weather-text">
          <p>%_pop_t_1</p>
        </div>
        <img id="weather-icon2" src="res/weather.webp" alt="Weather Icon">
        <p id="forecast2">-</p>
      </div>

      <div id="forcast-vertical">
        <div class="weather-text">
          <p>%_pop_t_2</p>
        </div>
        <img id="weather-icon3" src="res/weather.webp" alt="Weather Icon">
        <p id="forecast3">-</p>
      </div>

    </div>
  </div>
  </div>
  <div class="centered top-layer">
    <div id="current-time">--:--</div>
    <div class="search_area" id="search_area">
      <div class="searchnav" id="searchnav">
        <ul class="nav nav-tabs">
          <li class="nav-item search_inactive" id="chatgpt">ChatGPT</li>
          <li class="nav-item search_inactive" id="gizmo1">Gizmo1</li>
          <li class="nav-item search_inactive" id="gizmo2">Gizmo2</li>
          <li class="nav-item search_inactive" id="gizmo3">Gizmo3</li>
        </ul>
      </div>
      <div class="searchbox">
        <textarea id="search" class="scrollbar" placeholder="%_pop_ask %_pop_ask_chat_gpt"></textarea>
      </div>
    </div>
    <div class="search_area" id="engine_search_area">
      <div class="searchnav" id="engine_searchnav">
        <ul class="nav nav-tabs">
          <li class="engine_nav-item search_inactive" id="baidu">Baidu</li>
          <li class="engine_nav-item search_inactive" id="google">Google</li>
          <li class="engine_nav-item search_inactive" id="bing">Bing</li>
        </ul>
      </div>
      <div class="searchbox">
        <textarea id="engine_search" class="scrollbar" placeholder="%_pop_engine_search"></textarea>
      </div>
    </div>
    <div class="motto" id="motto"><span>%_pop_load_motto</span>
    </div>
  </div>

  <script src="js/popup.js"></script>
</body>

</html>